<template>
  <a-row style="margin-top:.5rem">
    <a-row class="hdd">
      <p style="font-size:1.1em">
        <a-icon :component="point" style="margin-right:.5rem" />
        <b>{{ $t("Machine-information") }}</b>
      </p>
      <a-row :gutter="8">
        <a-col :span="8" class="dcontent">
          <!-- <a-col :span="10" class="uheader"> -->
          {{ $t("Motherboard") }}：<!--主板型号-->
          <!-- </a-col> -->
          <!-- <a-col :span="14" class="ubody"> -->
          <!-- {{ btn ? btn.board : "" }} -->
          {{ btn ? btn.board_model : "" }}
          <!-- </a-col> -->
        </a-col>
        <a-col :span="8" class="dcontent">
          <!-- <a-col :span="10" class="uheader"> -->
          {{ $t("Memory-size") }}：<!--内存大小-->
          <!-- </a-col> -->
          <!-- <a-col :span="14" class="ubody"> -->
          <!-- {{ btn ? bytesToSize(btn.mem.total) : "" }} -->
          <!-- {{ btn ? btn.ram_total : "" }} -->
          {{ btn ? btn.mem_total : "" }}
          <!-- </a-col> -->
        </a-col>
        <a-col :span="8" class="dcontent">
          <!-- <a-col :span="10" class="uheader"> -->
          {{ $t("Status") }}：<!--状态-->
          <!-- </a-col> -->
          <!--? btn.status == true-->
          <!-- <a-col :span="14" class="ubody"> -->
          {{
          btn
            ? btn.cluster_status == true
              ? $t("Normal")
              : $t("Abnormal")
            : ""
        }}
          <!-- </a-col> -->
        </a-col>
        <a-col :span="24" class="dcontent">
          <!-- <a-col :span="3" class="uheader"> -->
          {{ $t("CPU-model") }}：<!--CPU型号-->
          <!-- </a-col> -->
          <!-- <a-col :span="20" class="ubody"> -->
          <!-- {{ btn ? btn.cpu.model : "" }} -->
          {{ btn ? btn.cpu_model : "" }}
          <!-- </a-col> -->
        </a-col>
        <a-col :span="24" class="dcontent">
          <!--操作系统-->
          <!-- <a-col :span="4" class="uheader">  -->
          {{ $t("OS") }}：
          <!-- </a-col> -->
          <!-- <a-col :span="20" class="ubody"> -->
          <!-- {{ btn ? btn.system : "" }} -->
          <!-- {{ btn ? btn.OS : "" }} -->
          {{ btn ? btn.os : "" }}
          <!-- </a-col> -->
        </a-col>
      </a-row>
    </a-row>

    <!--磁盘部分-->
    <a-row class="hdd">
      <p style="font-size:1.1em">
        <a-icon :component="point" style="margin-right:.5rem" /><b>{{
          $t("Disk")
        }}</b>
      </p>
      <a-row>
        <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="13">
          <div>
            <span>{{ $t("Select-view") }}{{ $t("Disk") }}</span><!--磁盘-->
            <!--切换-->
            <a-dropdown placement="bottomRight">
              <a-button type="primary" size="small" icon="interaction" style="float:right;"></a-button>
              <a-menu slot="overlay" :selectedKeys="currentSelectedKeys">
                <a-menu-item key="1" @click="changeView('1')">
                  <!-- 默认排列 -->
                  <span>{{ $t('Default-arrange') }}</span>
                </a-menu-item>
                <a-menu-item key="2" @click="changeView('2')">
                  <!-- 分类排列 -->
                  <span>{{ $t('Classify-arrange') }}</span>
                </a-menu-item>
                <!-- 机箱面板 -->
                <!-- <a-menu-item key="3" @click="changeView('3')">
                  <span>{{$t('Case-panel')}}</span>
                </a-menu-item> -->
              </a-menu>
            </a-dropdown>
            <!-- <a-tooltip placement="bottom">
              <template slot="title">
                <span>{{ $t('Switch') }}</span>
              </template>
<a-button type="primary" size="small" icon="interaction" style="float:right;" @click="tabbtn"></a-button>
</a-tooltip> -->
          </div>
          <a-spin :spinning="loading">
            <div class="dtitle2" style="min-height:21em;width:100%;margin:.5rem 0;overflow-y:auto;padding:0.5em 0;">
              <div v-if="tab == false">
                <a-radio-group v-model="view" @change="onChange" defaultValue="face" buttonStyle="solid" size="small">
                  <!-- 正视图 -->
                  <a-radio-button value="face" v-if="btn.disk_panel.includes(1)">{{ $t('Front-view')
                    }}</a-radio-button><!-- v-if="disksdata.face"-->
                  <!-- 顶视图 -->
                  <a-radio-button value="top" v-if="btn.disk_panel.includes(2)">{{ $t('Top-view')
                    }}</a-radio-button><!--v-if="disksdata.top"-->
                </a-radio-group>
              </div>
              <div v-if="currentSelectedKeys[0] == '2'">
                <a-radio-group v-model="diskTypeView" default-value="all" button-style="solid" size="small">
                  <a-radio-button value="all">{{ $t('All') }}</a-radio-button><!--全部-->
                  <a-radio-button value="system">{{ $t('System-disk') }}</a-radio-button><!--系统盘system-->
                  <a-radio-button value="cache">{{ $t('Cache-disk') }}</a-radio-button><!--缓存盘cache-->
                  <a-radio-button value="data">{{ $t('Data-disk') }}</a-radio-button><!--数据盘data-->
                  <a-radio-button value="no-active">{{ $t('No-active-disk') }}</a-radio-button><!--未激活盘no-active-->
                </a-radio-group>
              </div>
              <!--磁盘视图-->
              <div v-if="currentSelectedKeys[0] == '2'" class="disk-view-box">
                <!--缓存盘的描述-->
                <div v-show="diskTypeView == 'cache'" class="cache-disk-dec">
                  <img src="../../../static/images/disk_check/16_f_ic_tips.png" alt="tip_img" class="tip-img" />
                  <span v-if="$store.state.language == 'zh'">共有缓存盘<span>{{ panelDiskData2[1].disks.length
                      }}块</span>，平均使用率<span>{{
          btn.cache_disk_percent
          || 0 }}%</span></span>
                  <span v-else>There are <span>{{ panelDiskData2[1].disks.length }} cache disks</span>, with an average
                    utilization rate of <span>{{ btn.cache_disk_percent || 0 }}%</span></span>
                </div>
                <!--未激活盘的描述-->
                <div v-show="diskTypeView == 'no-active'" class="cache-disk-dec2"
                  :style="$store.state.language == 'en' ? { padding: '2px' } : {}">
                  <img src="../../../static/images/disk_check/16_f_ic_tips.png" alt="tip_img" class="tip-img" />
                  <span v-if="$store.state.language == 'zh'">以下磁盘未激活（纳管），您可进行插拔操作，也可点击磁盘后进入界面进行激活操作。</span>
                  <span v-else>The following disks are not activated (nano tube), you can either plug and unplug, or
                    click
                    the disk to enter the interface for activation.</span>
                </div>
                <div v-for="(item, index) in panelDiskData2" :key="index">
                  <!--盘的类型-->
                  <div v-if="item.type == diskTypeView || diskTypeView == 'all'">
                    <div v-if="$store.state.language == 'zh'">{{ item.zh_type }}</div>
                    <div v-else>{{ item.en_type }}</div>
                  </div>
                  <div
                    v-if="(item.type == diskTypeView && item.disks.length == 0) || (diskTypeView == 'all' && item.disks.length == 0)">
                    --{{ $t('No-data') }}--</div>
                  <!--盘的数据-->
                  <div v-if="item.type == diskTypeView || diskTypeView == 'all'">
                    <img ondragstart="return false" oncontextmenu="return false" :src="isstatus(n)"
                      style="border:0.3em solid transparent" v-for="(n, index) in item.disks" :id="'disk' + n.id"
                      :key="n.id" @click="diskselect('disks', n.id, n)" alt="disk_img" />
                  </div>
                </div>
              </div>
              <!--默认列表图-->
              <div v-else-if="currentSelectedKeys[0] == '1'"><!--tab-->
                <img ondragstart="return false" oncontextmenu="return false" :src="isstatus(n)"
                  style="border:0.3em solid transparent" v-for="(n, index) in basedisks" :id="'disk' + n.id" :key="n.id"
                  @click="diskselect('disks', n.id, n)" alt="disk_img" />
                <!-- :src="n.xxx | isstatus" -->
              </div>
              <!-- 正视图  顶视图 -->
              <div :id="view == 'face' ? 'stretch' : 'topview'" class="diskimg"
                v-else-if="currentSelectedKeys[0] == '3'">
                <!--v-if="tab == false && view=='top'"-->
                <img ondragstart="return false" oncontextmenu="return false" v-for="(item, index) in panelDiskData"
                  :key="index" :src="isstatus(item)" style="border:0.3em solid transparent;"
                  :width="100 / (view == 'face' ? front_column : top_column) + '%'" :id="'disk' + index"
                  @click="diskselect('panel', index)" alt="disk_img" />
              </div>
              <!-- <div id="stretch" class="diskimg">
                <img
                  ondragstart="return false"
                  oncontextmenu="return false"
                  :src="n.imgflag | isstatus(gifFlag, n)"
                  :width="100 / 4 + '%'"
                  style="border:0.3em solid transparent;"
                  v-for="(n, index) in disksdata.face.values"
                  :id="'disk' + index"
                  :key="index"
                  @click="diskselect('disks_layout', index)"
                />
              </div> -->
            </div>
          </a-spin>
        </a-col>

        <a-col :xl="1" style="text-align:center">
          <a-icon type="double-right" class="diskdecrtion"></a-icon>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
          <a-row class="idiskdetail">
            <a-tabs type="card" size="small">
              <!--基本信息-->
              <a-tab-pane key="1" :tab="$t('Base_info')" style="font-size: 14px;">
                <!-- <p class="val" style="margin:0rem">{{ $t("Disk") }}</p> -->
                <a-col :span="24">
                  <a-col :span="10" class="dtitle">
                    {{ $t("Equipment-name") }}：
                  </a-col>
                  <a-col :span="14" class="dbody">
                    {{ diskdetail.name }}
                  </a-col>
                </a-col>
                <a-col :span="24">
                  <a-col :span="10" class="dtitle">
                    {{ $t("Type") }}：
                  </a-col>
                  <a-col :span="14" class="dbody" v-if="diskdetail">
                    {{ diskTypeMap.get(diskdetail.type) }}
                  </a-col>
                </a-col>
                <!--定位灯-->
                <a-col :span="24" v-userAuth="'C3-2'">
                  <a-col :span="10" class="dtitle">
                    {{ $t('Locating-light') }}：
                  </a-col>
                  <a-col :span="14" class="dbody">
                    <a-switch size="small" v-model="diskdetail.light" @change="onSwitch(diskdetail)"
                      :disabled="diskdetail.attach == 0" />
                    <!--v-model="" :disabled="diskdetail.attach == 1" 被拔盘 -->
                  </a-col>
                </a-col>
                <!--容量-->
                <a-col :span="24">
                  <a-col :span="10" class="dtitle">
                    {{ $t("Capacity") }}：
                  </a-col>
                  <a-col :span="14" class="dbody">
                    <!-- {{ diskdetail.total ? bytesToBs(diskdetail.total) : "" }} -->
                    {{ diskdetail.total ? diskdetail.total : "" }}
                  </a-col>
                </a-col>
                <!-- <a-col :span="24">
                    <a-col :span="8" class="dtitle">
                      {{ $t("Status") }}：
                    </a-col>
                    <a-col :span="16" class="dbody">
                      <a-icon
                        :component="
                          diskdetail.status
                            ? diskdetail.status == true
                              ? normal
                              : abnormal
                            : ''
                        "
                      />
                      {{
                        diskdetail.status
                          ? diskdetail.status == true
                            ? $t("Normal")
                            : $t("Abnormal")
                          : ""
                      }}
                    </a-col>
                  </a-col> -->
                <!-- <a-col :span="24">
                    <a-col :span="8" class="dtitle">
                      {{ $t("Slow-disk") }}：
                    </a-col>
                    <a-col :span="16" class="dbody">
                      {{ diskdetail.status ? $t("No") : "" }}
                    </a-col>
                  </a-col> -->
                <!--用途-->
                <a-col :span="24">
                  <a-col :span="10" class="dtitle">
                    {{ $t("Application") }}：
                  </a-col>
                  <a-col :span="14" class="dbody">
                    <!-- {{ diskdetail.app }} -->
                    <span v-if="diskdetail.application == 0">{{ $t("System-disk") }}</span>
                    <span v-else-if="diskdetail.application == 1">{{ $t("Cache-disk") }}</span>
                    <span v-else-if="diskdetail.application == 2">{{ $t("Data-disk") }}</span>
                    <span v-else>{{ $t("Not-in-tube-disk") }}</span>
                  </a-col>
                </a-col>
                <a-col :span="24">
                  <a-col :span="10" class="dtitle">
                    WWID：
                  </a-col>
                  <a-col :span="14" class="dbody" :title="diskdetail.wwid">
                    <!-- {{ diskdetail.WWID }} -->
                    {{ diskdetail.wwid }}
                  </a-col>
                </a-col>
                <!--状态-->
                <a-col :span="24">
                  <a-col :span="10" class="dtitle">
                    {{ $t('Status') }}：
                  </a-col>
                  <a-col :span="14" class="dbody">
                    <!-- <div v-if="diskdetail.attach == 1"> -->
                    <div v-if="diskdetail.status === 0" style="display:inline-block">
                      <span class="small-circle red-circle"></span>
                      <span>{{ $t('Activated-osd-error') }}</span><!--已激活，osd 状态异常-->
                    </div>
                    <div v-else style="display:inline-block">
                      <span class="small-circle green-circle"></span>
                      <span v-if="diskdetail.application == 3">{{ $t('Inactive-pluggable') }}</span><!--未激活，可插拔-->
                      <span v-else>{{ $t('Active-in-normal') }}</span><!--已激活，正常使用中-->
                    </div>
                    <!-- </div> -->
                    <!-- <div v-else-if="diskdetail.attach == 0">
                        已激活，未正常使用 注释
                        <span class="small-circle red-circle"></span>{{$t('Activated-not-used-ok')}}
                      </div> -->
                  </a-col>
                </a-col>
                <!--使用率-->
                <a-col :span="24">
                  <a-col :span="10" class="dtitle">
                    {{ $t('Usage-rate') }}：
                  </a-col>
                  <a-col :span="14" class="dbody">
                    <a-progress :percent="Number(diskdetail.used_percent)" size="small" />
                  </a-col>
                </a-col>
                <!--前往激活，未激活盘才有-->
                <a-col :span="24" v-if="diskdetail.application == 3">
                  <a-button type="primary" @click="gotoOSDPage(diskdetail, 'active')" v-userAuth="'E5-9'">
                    <img src="../../../static/images/disk_check/16_f_ic_go.png"
                      style="vertical-align:sub;margin-right:5px" alt="go_img" />
                    {{ $t('Go-to-activate') }}<!-- 前往激活 -->
                  </a-button>
                </a-col>
                <!--置为未激活，缓存盘数据盘才有-->
                <a-col :span="24" v-if="diskdetail.application == 2 || diskdetail.application == 1">
                  <a-button type="primary" @click="gotoOSDPage(diskdetail, 'noActive')" v-userAuth="'E5-4'">
                    <img src="../../../static/images/disk_check/16_f_ic_set_white.png"
                      style="vertical-align:sub;margin-right:5px" alt="set_img" />
                    {{ $t('Release') }}<!--置为未激活-->
                  </a-button>
                </a-col>
              </a-tab-pane>
              <!-- <a-tab-pane key="2" :tab="$t('Health')">
                <a-col :span="24">
                  <a-col :span="8" class="dtitle">
                    {{ $t("Temperature") }}：
                  </a-col>
                  <a-col :span="16" class="dbody">
                    {{ healthData.temperature ? healthData.temperature : '-' }} &#8451;
                  </a-col>
                </a-col>
                <a-col :span="24">
                  <a-col :span="8" class="dtitle">
                    {{ $t("Elapsed_time") }}：
                  </a-col>
                  <a-col :span="16" class="dbody">
                    {{ healthData.runTime ? healthData.runTime : '-' }} H
                  </a-col>
                </a-col>
                <a-col :span="24">
                  <a-col :span="8" class="dtitle">
                    {{ $t("Read_volume") }}：
                  </a-col>
                  <a-col :span="16" class="dbody">
                    {{ healthData.totalRead ? bytesToSize(healthData.totalRead) : '-' }}
                  </a-col>
                </a-col>
                <a-col :span="24">
                  <a-col :span="8" class="dtitle">
                    {{ $t("Write_volume") }}：
                  </a-col>
                  <a-col :span="16" class="dbody">
                    {{ healthData.totalWrite ? bytesToSize(healthData.totalWrite) : '-'}}
                  </a-col>
                </a-col>
              </a-tab-pane> -->
            </a-tabs>
          </a-row>
        </a-col>
      </a-row>
    </a-row>

    <!--网络部分 右下方底部-->
    <a-row class="hdd">
      <p style="font-size:1.1em">
        <a-icon :component="point" style="margin-right:.5rem" />
        <!-- <b>iSCSI {{ $t("Service") }}/{{$t("Internal-network")}}</b>iSCSI 服务/内部网络 -->
        <b>{{ $t("Internal-network") }}</b>
      </p>
      <!-- <a-col :xs='14' :sm='14' :md='14' :lg='14' :xl='5'>
                <div class="inet inettop">
                    <p>iSCSI服务：<span class='val'>10.0.2.0/24</span></p>
                    <p>存储集群：<span class="val">10.0.2.0/24</span></p>
                </div>
            </a-col> -->

      <!-- <a-row :gutter="8" v-if="btn">
        <a-col :span="12">
          <a-col :span="6" class="dtitle">
            iSCSI {{ $t("Service") }}：
          </a-col>
          <a-col :span="18" class="dbody">
            {{ btn.lan.manager }}
          </a-col>
        </a-col>
        <a-col :span="12">
          <a-col :span="6" class="dtitle">
            {{ $t("Storage-cluster") }}：
          </a-col>
          <a-col :span="18" class="dbody">
            {{ btn.lan.store }}
          </a-col>
        </a-col>
      </a-row> -->
      <span>{{ $t("Select-view") }}{{ $t("Network-card") }}</span><!--选择并查看网卡-->
      <a-row :gutter="8">
        <a-col :xs="10" :sm="10" :md="10" :lg="10" :xl="8">
          <a-spin :spinning="loading">
            <a-row class="inet inetscroll"><!--原来为btn.net_board / nics_info-->
              <a-col :span="6" v-for="(item, index) in btn.net_infos" :id="'net' + index" :key="index">
                <a-tooltip placement="top">
                  <template slot="title">
                    <!-- <span>192.168.2.1{{index}}</span> -->
                    <span>{{ item.name }}</span>
                  </template>
                  <!-- <i 
                    class="icon icon-net24f net-card-icon"
                    @click="netselect(index)"
                  >
                  </i> -->
                  <Iconfont class="icon net-card-icon" type="icon-net24f" @click="netselect(index)"></Iconfont>
                  <!-- <a-icon
                    :component="net"
                    class="inetsingle"
                    @click="netselect(index)"
                  ></a-icon> -->
                </a-tooltip>
              </a-col>
            </a-row>
          </a-spin>
        </a-col>
        <a-col :xl="1" style="text-align:center;">
          <a-icon type="double-right" class="decrtion" />
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="15">
          <a-row :gutter="8" class="inetdetail">
            <p class="val" style="margin:0rem;">
              {{ $t("Network-card") }}
            </p>

            <a-col :span="8">
              <a-col :span="10" class="dtitle">
                {{ $t("Equipment-name") }}：<!--设备名-->
              </a-col>
              <a-col :span="14" class="dbody">
                <!-- {{ netdetail.NAME }} -->
                {{ netdetail.name }}
              </a-col>
            </a-col>
            <a-col :span="8">
              <a-col :span="10" class="dtitle">
                MTU：
              </a-col>
              <a-col :span="14" class="dbody">
                <!-- {{ netdetail.MTU }} -->
                {{ netdetail.mtu }}
              </a-col>
            </a-col>
            <a-col :span="8">
              <a-col :span="10" class="dtitle">
                {{ $t("Rate") }}：<!--速率-->
              </a-col>
              <a-col :span="14" class="dbody">
                <!-- {{ netdetail.SPEED }} -->
                {{ netdetail.rate }}
              </a-col>
            </a-col>
            <a-col :span="8">
              <a-col :span="10" class="dtitle">
                MAC：
              </a-col>
              <a-col :span="14" class="dbody2">
                <!-- {{ netdetail.MAC }} -->
                {{ netdetail.mac }}
              </a-col>
            </a-col>
            <!--丢包-->
            <!-- <a-col :span="8">
              <a-col :span="10" class="dtitle">
                {{ $t("Packet-loss") }}：
              </a-col>
              <a-col :span="14" class="dbody">
                {{ netdetail.loose_pack }}
              </a-col>
            </a-col> -->
          </a-row>
        </a-col>
      </a-row>
    </a-row>
  </a-row>
</template>
<script>
import point from "../../../static/images/svg/01.svg";
// import net from "../../../static/images/svg/ic_net.svg";
// import normal from "../../../static/images/svg/ic_status_normal.svg";
// import abnormal from "../../../static/images/svg/ic_status_abnormal.svg";
import $ from "jquery";

import request from '@/request/request'

export default {
  name: "Phycontent",
  props: ["info", "btn", "loading"],
  // template:
  //   '<a-icon :component = "point,cpu,memory,disk,normal,net,abnormal" />',
  data() {
    return {
      point,
      // net,
      // normal,
      // abnormal,
      netdetail: "",
      diskdetail: "",
      test: false,
      seldisk: 0,
      selnet: 0,
      tab: true,
      disksdata: "",
      basedisks: "",
      view: "face",
      healthData: '',
      gifFlag: false,
      panelDiskData: [],
      // disk_column: 0,
      front_column: 0,
      top_column: 0,
      currentNode: '',
      // diskdetail:[{label:'设备名',val:'sda'},{label:'类型',val:'SSD'},{label:'容量',val:'256GiB'},{label:'健康度',val:'正常'},{label:'慢盘',val:'否'},{label:'用途',val:'缓存盘'},{label:'WWID',val:'sdhfjkshdjfksdkjfbajkbchbasdjkdhGHSDJgf'}],
      // netdata:[{label:'设备名',val:'eno1'},{label:'MAC',val:'ac:1f:6b:63:cc:48'},{label:'速率',val:'1000'},{label:'丢包',val:'0'},{label:'MTI',val:'1500'}],
      // mechandata:[{label:'主板型号',val:'X10DRL-1'},{label:'操作系统',val:'Linux 3.10.0-9957.el7.x86_64'},{label:'内存大小',val:'88GiB'},{label:'状态',val:'正常'},{label:'CPU型号',val:'Inter(R) Xeno(R) CPU ES-2620 v3 @ 2.40GHz'}]
      currentSelectedKeys: ['2'],
      diskTypeView: 'all',
      panelDiskData2: [
        { zh_type: '系统盘', en_type: 'System disk', type: 'system', disks: [] },
        { zh_type: '缓存盘', en_type: 'Cache disk', type: 'cache', disks: [] },
        { zh_type: '数据盘', en_type: 'Data disk', type: 'data', disks: [] },
        { zh_type: '未激活盘', en_type: 'Inactive disk', type: 'no-active', disks: [] }
      ],
      diskTypeMap: new Map([
        [0, 'SSD'],
        [1, 'HDD'],
        [2, 'NVMe']
      ]),
    };
  },
  watch: {
    btn(val) {
      console.log('子组件当前节点', val)
      this.currentNode = val;
      this.view = 'face';
      this.getPanelDiskData(val.hostname);
      // this.disk_column = val.disk_column;
      this.front_column = val.front_column;
      this.top_column = val.top_column;
      this.disksdata = val.disks_layout;
      // this.basedisks = val.disks;
      if (val.cluster_status) { //如果节点没有挂掉
        if (val.disk_infos.length != 0) { //disks_info
          // console.log('11111')
          this.basedisks = val.disk_infos;
          this.diskdetail = val.disk_infos[0];
          this.panelDiskData2.forEach(item => {
            item.disks = [];
          })
          val.disk_infos.forEach(item => {
            if (item.application == 0) {//系统盘
              this.panelDiskData2[0].disks.push(item);
            } else if (item.application == 1) {//缓存盘
              this.panelDiskData2[1].disks.push(item);
            } else if (item.application == 2) {//数据盘
              this.panelDiskData2[2].disks.push(item);
            } else if (item.application == 3) {//未激活盘
              this.panelDiskData2[3].disks.push(item);
            }
          })
        } else {
          this.basedisks = [];
          this.diskdetail = [];
          this.panelDiskData2.forEach(item => {
            item.disks = [];
          })
        }
      } else {
        this.basedisks = [];
        this.diskdetail = [];
        this.panelDiskData2.forEach(item => {
          item.disks = [];
        })
      }
      // this.diskdetail = "";
      this.netdetail = "";
      $("#net" + this.selnet)
        .children()
        .css("background-color", "#77BCFF");
      // 初始化第一个选择并查看的详情
      if (this.tab) {
        this.diskselect('disks', this.seldisk);
      } else {
        this.diskselect('disks_layout', this.seldisk);
      }
      $("#disk" + this.seldisk).css({ "border": "0.3em solid transparent", "box-shadow": "none" });
      this.netselect(this.selnet);
    },
    info(newValue) {
      // 初始化第一个选择并查看的详情
      if (this.tab) {
        this.diskselect('disks', this.seldisk);
      } else {
        this.diskselect('disks_layout', this.seldisk);
      }
      this.netselect(this.selnet);
    }
  },
  mounted() {

  },
  filters: {
    isstatus(val, diskItem) { //第一个参数：是否点灯，第二个参数：当前选中的磁盘
      const type = diskItem.type; //盘的类型
      // const status = diskItem.attach; //是否被拔盘（1 表示磁盘插在插槽上，0 表示磁盘被拔出）
      const status = 1; //现在不要attach字段了，所以直接设为1
      let imageUrl = '';
      if (type == 0) {
        if (val) {
          imageUrl = require("../../../static/images/GIF/ic_SSD_normal_light.gif");
        } else {
          if (status == 1) {
            imageUrl = require("../../../static/images/png/ic_SSD_normal.png");
          } else {
            imageUrl = require("../../../static/images/png/ic_SSD_abnormal.png");
          }
        }
      } else if (type == 1) {
        if (val) {
          imageUrl = require("../../../static/images/GIF/ic_HDD_normal_light.gif");
        } else {
          if (status == 1) {
            imageUrl = require("../../../static/images/png/ic_HDD_normal.png");
          } else {
            imageUrl = require("../../../static/images/png/ic_HDD_abnormal.png");
          }
        }
      } else if (type == 2) {
        if (val) {
          imageUrl = require("../../../static/images/GIF/ic_NVMe_normal_light.gif");
        } else {
          if (status == 1) {
            imageUrl = require("../../../static/images/png/ic_NVMe_normal.png");
          } else {
            imageUrl = require("../../../static/images/png/ic_NVMe_abnormal.png");
          }
        }
      } else {
        imageUrl = require("../../../static/images/png/ic_disk_empty.png");
      }
      return imageUrl;
    }
  },

  methods: {
    getPanelDiskData(hostname = this.info[0].hostname, panel = 1) {//获取不同面板下的磁盘数据
      // request('get', 'machine/panel_disk', {
      //   // params: {
      //     hostname: hostname,//节点名
      //     panel: panel, //面板位置
      //   // }
      // }).then(res => {
      //   // console.log('获取不同面板的数据',res)
      //   this.panelDiskData = res.data;
      // }).catch(err => {
      //   console.log(err);
      // })
    },
    netselect(name) {
      this.selnet = name;
      $("#net" + name)
        .children()
        .css("background-color", "#77BCFF");
      $("#net" + name)
        .siblings()
        .children()
        .css("background-color", "");
      if (this.btn.net_infos.length !== 0) {//原来为btn.net_board
        this.netdetail = this.btn.net_infos[name];
      }
    },
    diskselect(flag, name, n = {}) {
      console.log('当前盘', n)
      this.seldisk = name;
      $("img[id^='disk']").css({ "border": "0.3em solid transparent", "box-shadow": "none" });
      $(`img[id='disk${name}']`).css({ "border": "0.3em solid #fff", "box-shadow": "#b2b2b2 3px 3px 8px 2px", "border-radius": "5px" });
      // $("#disk" + name).css({"border":"0.3em solid #fff" , "box-shadow":"#b2b2b2 3px 3px 8px 2px", "border-radius": "5px"} );
      // $("#disk" + name)
      //   .siblings()
      //   .css({"border":"0.3em solid transparent" , "box-shadow":"none"});
      if (flag == "disks_layout") {
        for (let item in this.btn.disks_layout) {
          if (this.btn.disks_layout[item].values.length !== 0) {
            for (let i = 0; i < this.btn.disks_layout[item].values.length; i++) {
              if (this.btn.disks_layout[item].values[i] !== null) {
                if (name == i) {
                  // this.getHealth(this.btn.disks_layout[item].values[i].name)
                  this.diskdetail = this.btn.disks_layout[item].values[i];
                }
              }
            }
          }
        }
      } else if (flag == "disks") {
        // for (var item in this.btn.disk_infos) {
        // if(this.btn.disks[item].length !== 0) {
        for (const item of this.btn.disk_infos) {
          if (item !== null) {
            // if (name == i) {
            if (name == item.id) {
              // this.getHealth(this.btn.disks[item][i].name)
              this.diskdetail = item;
            }
          }
        }
        // }
        // }
      } else if (flag == "panel") {
        for (const item of this.panelDiskData) {
          if (item !== null) {
            if (name == i) {
              this.diskdetail = item;
            }
          }
        }
      }
    },
    // getHealth(name) {
    //   this.$axios.get(this.allurl + 'machine/disk/health_mes', {
    //     params: {
    //       device: '/dev/' + name
    //     }
    //   }).then(res => {
    //     this.healthData = res.data;
    //   }).catch(err => {
    //     this.healthData = '';
    //   })
    // },
    tabbtn() {
      this.tab = !this.tab;
    },
    onChange(e) {
      this.view = e.target.value;
      let panel = 0;
      // let hostname = this.info[0].hostname;
      let hostname = this.btn.hostname;
      if (e.target.value == 'face') {
        panel = 1;
      } else {
        panel = 2;
      }
      this.getPanelDiskData(hostname, panel);
    },

    //磁盘点灯
    onSwitch(item) {
      item.light = !item.light;
      // this.afterSwitchLight();
      request('get', 'machine/disk/light', {
        // params: {
        wwid: item.wwid,
        status: !item.light ? 1 : 0
        // status: !item.light //0不开灯 1开灯
        // }
      }).then(res => {
        if (res.data.flag == 0) {
          this.$message.success(this.$t('Disk-lighting-ok'));//磁盘点灯操作成功！
          item.light = !item.light;
        } else {
          this.$message.error(this.$t('Disk-lighting-no'));//磁盘点灯操作失败！硬件不支持！
        }
      }).catch(err => {
        console.log(err);
      })
      // this.gifFlag = checked
      // this.$emit('updateData',this.currentNode)
    },
    //点灯完，更新数据
    afterSwitchLight() {
      // console.log('22222222')
      request('get', "machine/").then(res => {
        // console.log('节点列表', res)
        if (res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        } else {
          let currentIndex = 0;
          res.data.some((item, index) => {
            if (this.currentNode.hostname == item.hostname) {
              currentIndex = index;
            }
          });
          this.basedisks = res.data[currentIndex].disk_infos;
          this.panelDiskData2.forEach(item => {
            item.disks = [];
          })
          res.data[currentIndex].disk_infos.forEach(item => {
            if (item.application == 0) {//系统盘
              this.panelDiskData2[0].disks.push(item);
            } else if (item.application == 1) {//缓存盘
              this.panelDiskData2[1].disks.push(item);
            } else if (item.application == 2) {//数据盘
              this.panelDiskData2[2].disks.push(item);
            } else if (item.application == 3) {//未激活盘
              this.panelDiskData2[3].disks.push(item);
            }
          })
        }
      });
    },


    isstatus(diskItem) {
      const type = diskItem.type; //盘的类型
      // const status = diskItem.attach; //是否被拔盘（1 表示磁盘插在插槽上，0 表示磁盘被拔出）
      const status = diskItem.status; //现在不要attach字段了，改为status 0红色，1绿色
      const light = diskItem.light//是否点灯
      let imageUrl = '';
      if (type == 0) {
        if (status == 1) {
          if (light == 1) {//灯亮
            imageUrl = require("../../../static/images/GIF/ic_SSD_normal_light.gif");
          } else {
            imageUrl = require("../../../static/images/png/ic_SSD_normal.png");
          }
        } else {
          if (light == 1) {//灯亮
            imageUrl = require("../../../static/images/GIF/ic_SSD_abnormal_light.gif");
          } else {
            imageUrl = require("../../../static/images/png/ic_SSD_abnormal2.png");
          }
        }
      } else if (type == 1) {
        if (status == 1) {
          if (light == 1) {//灯亮
            imageUrl = require("../../../static/images/GIF/ic_HDD_normal_light.gif");
          } else {
            imageUrl = require("../../../static/images/png/ic_HDD_normal.png");
          }
        } else {
          if (light == 1) {//灯亮
            imageUrl = require("../../../static/images/GIF/ic_HDD_abnormal_light.gif");
          } else {
            imageUrl = require("../../../static/images/png/ic_HDD_abnormal2.png");
          }
        }
      } else if (type == 2) {
        if (light == 1) {//灯亮
          imageUrl = require("../../../static/images/GIF/ic_NVMe_normal_light.gif");
        } else {
          imageUrl = require("../../../static/images/png/ic_NVMe_normal.png");
        }
      } else {
        if (light == 1) {//灯亮
          imageUrl = require("../../../static/images/GIF/ic_NVMe_abnormal_light2.gif");
        } else {
          imageUrl = require("../../../static/images/png/ic_NVMe_abnormal1.png");
        }
      }
      return imageUrl;
    },
    //切换面板视图
    changeView(view) {
      if (view == '1') {
        this.tab = true;
        this.currentSelectedKeys = ['1'];
      } else if (view == '2') {
        this.tab = true;
        this.currentSelectedKeys = ['2'];
      } else {
        this.tab = false;
        this.currentSelectedKeys = ['3'];
      }
    },
    //前往osd界面激活
    gotoOSDPage(item, type) {
      // if(type) {//如果是置为未激活

      // }
      console.log(item)
      this.$store.commit('goToOsd', {
        type: type,
        currentData: item.id
      })
      this.$router.push('/diskmgr');
    },
    // //前往存储概况
    // gotoPoolPage() {
    //   this.$store.commit('goToOsd', {
    //     state: true,
    //     currentData: item.xxx
    //   })
    //   this.$router.push('/overview');
    // },
  },
};
</script>
<style>
.inetsingle svg {
  width: 3rem !important;
  height: 2rem !important;
  text-align: center;
}

.selectnet {
  background-color: #77bcff !important;
}

.hdd {
  padding: 1rem;
  border: 2px solid var(--themeColor);
  margin: 0 0.3rem 0.5rem 0.3rem;
}

.inet {
  background-color: var(--mainGreyColor);
  text-align: center;
  height: 6rem;
  line-height: 6rem;
}

.inetscroll {
  overflow-y: auto;
}

.inettop {
  padding-top: 1.5rem;
}

.inetsingle {
  cursor: pointer;
  margin-top: 0.6rem;
}

.net-card-icon {
  cursor: pointer;
  color: var(--themeColor);
  font-size: 36px;
}

.val {
  color: var(--themeColor);
}

.inetdetail {
  height: 6rem;
  box-shadow: 0px 1px 5px #ccc;
  border-left: 3px solid var(--themeColor);
  padding: 0.5rem;
}

.idiskdetail {
  box-shadow: 0px 1px 5px #ccc;
  border-left: 3px solid var(--themeColor);
  padding: 0.5rem;
  min-height: 17rem;
}

.dtitle2 {
  background-color: var(--mainGreyColor);
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
}

.dtitle {
  /* background-color: #e6f4ff; */
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
}

.dbody {
  /* background-color: #f1f8fe; */
  margin-bottom: 0.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 0.5rem;
}

.dbody2 {
  margin-bottom: 0.5rem;
  padding: 0 0.5rem;
}

.decrtion {
  color: var(--themeColor);
  line-height: 6rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.diskdecrtion {
  color: var(--themeColor);
  line-height: 15rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.diskimg {
  border: 1.5em solid;
  border-top: 30px solid;
  border-bottom: 15px solid;
  width: 75%;
  /* padding: 3px 18px; */
  margin: 1em auto;
}

#stretch {
  -moz-border-image: url(../../../static/images/png/crate_front_02.png) 30 30 stretch;
  /* Old Firefox */
  -webkit-border-image: url(../../../static/images/png/crate_front_02.png) 30 30 stretch;
  /* Safari and Chrome */
  -o-border-image: url(../../../static/images/png/crate_front_02.png) 30 30 stretch;
  /* Opera */
  border-image: url(../../../static/images/png/crate_front_02.png) 30 30 stretch;
  background-color: #fff;
  border-image-slice: 30 40;
}

.diskimgtop {
  /* transform:rotate(-90deg); */
  border: 20px solid;
  border-top: 30px solid;
  width: 80%;
  height: auto;
  /* padding: 3px 18px; */
  margin: 1em auto;
}

#topview {
  -moz-border-image: url(../../../static/images/png/crate_top.png) 30 30 stretch;
  /* Old Firefox */
  -webkit-border-image: url(../../../static/images/png/crate_top.png) 30 30 stretch;
  /* Safari and Chrome */
  -o-border-image: url(../../../static/images/png/crate_top.png) 30 30 stretch;
  /* Opera */
  border-image: url(../../../static/images/png/crate_top.png) 30 30 stretch;
  background-color: #fff;
  border-image-slice: 30 40;
}

.ant-tabs-bar {
  margin-bottom: 5px;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  font-size: 14px;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active .ant-tabs-tab {
  font-size: 14px;
}

/* @keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.4; }
  to { opacity: 1.0; }
}
@-webkit-keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.4; }
  to { opacity: 1.0; }
}
.twinkle {
  animation: fade 600ms infinite;    
  -webkit-animation: fade 600ms infinite;
} */
</style>
<style scoped>
.disk-view-box {
  max-height: 20em;
  overflow: auto;
}

.cache-disk-dec,
.cache-disk-dec2 {
  width: 100%;
  height: 48px;
  padding: 14px;
  margin: 5px 0;
  background-color: rgba(7, 133, 253, 0.1);
  border-radius: 4px;
  border: solid 1px var(--themeColor);
}

.cache-disk-dec2 {
  padding: 2px;
}

.cache-disk-dec img,
.cache-disk-dec2 img {
  margin-right: 5px;
  vertical-align: text-bottom;
}

.cache-disk-dec span>span,
.cache-disk-dec2 span>span {
  color: var(--themeColor);
  font-weight: 700;
}

.small-circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.tip-img {
  width: 16px;
  height: 16px;
}

::v-deep.ant-radio-button-wrapper {
  border-radius: 0;
}

@media screen and (min-width:1920px) {
  .cache-disk-dec2 {
    padding: 14px;
  }
}

::v-deep.ant-progress-text {
  margin-left: 0;
}
</style>
